<script>
import { defineComponent } from "vue";
import {
  HomeFilled,
} from "@element-plus/icons-vue";
export default defineComponent({
  /**
   * 右击面板
  */
  name: "context-menu",
  components: {
    HomeFilled,
  },
  props: {
    posX: {
      type: Number,
      default: 0,
    },
    posY: {
      type: Number,
      default: 0,
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {},
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    mainStyle() {
      return {
        left: this.posX + "rem",
        top: this.posY + "rem",
      };
    },
  },
  beforeRouteLeave() {},
  methods: {
    homeClick() {
      this.$store.commit("LOCATION_ORIGIN_VIEW");
    },
  },
});
</script>

<template>
  <div class="context-menu" v-show="show" :style="mainStyle">
    <header></header>
    <div class="functions">
      <div class="function hover-pointer" @click="homeClick">
        <el-icon class="self"><HomeFilled color="#2168b2" /></el-icon>
        <span class="">初始化视角</span>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.context-menu {
  position: fixed;
  z-index: 10;
  width: 25rem;
  height: 20rem;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);
  & > header {
    height: 3rem;
  }
}
.el-icon.self {
  font-size: 2rem;
}
.functions {
  & > .function {
    margin-top: 5px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    border-left-width: .5rem;
    border-left-style: solid;
    border-color: transparent;
    & > span {
      margin-left: 1rem;
      font-size: 1.4rem;
      color: #666;
      font-weight: bolder;
    }
    &:hover {
      background-color: rgba(33, 104, 178, 0.2);
      border-left-color: rgba(33, 104, 178, 0.8);
      & > span {
        color: #333;
      }
    }
  }
}
</style>
